<template>
  <!-- 维护作业-延期拒保原因维护页面 -->
  <div class="fillcontain">
    <el-form :model="searchParams" :rules="searchRules" ref="searchForm" label-width="100px" class="search_container">
      <el-row>
        <el-col :span="6">
          <el-form-item label="PAS原因码" prop="noteitem">
            <el-input clearable v-model="searchParams.noteitem" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="原因类型" prop="zresnpd">
            <el-select placeholder="请选择" v-model="searchParams.zresnpd" clearable>
              <el-option
                  v-for="con in zresnpds"
                  :key="con.value"
                  :label="con.label"
                  :value="con.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6" class="text_center">
          <el-button type="primary" icon="el-icon-search" @click="subGetList"></el-button>
          <el-button type="primary" plain icon="el-icon-refresh" @click="resetSearch"></el-button>
        </el-col>
      </el-row>
    </el-form>
    <div class="contain">
      <el-row class="bgfff pb15">
        <el-col :span="24" class="pt5">
          <el-button type="danger" plain @click="goAdd">新增</el-button>
        </el-col>
      </el-row>
      <!-- 查询结果 -->
      <div class="table_container">
        <el-table
            v-loading="loading"
            :data=" relationtableData"
            highlight-current-row
            header-cell-class-name="table-header-class"
            style="width:100%">
          <el-table-column
              min-width="120"
              property="noteitem"
              label="PAS原因码"
              align='center'
              show-overflow-tooltip>
          </el-table-column>
          <el-table-column
              min-width="120"
              property="zresnpd"
              label="原因类型"
              align='center'
              show-overflow-tooltip>
            <template slot-scope="scope">{{scope.row.zresnpd | zresnpdPige}}</template>
          </el-table-column>
          <el-table-column
              property="notedesc"
              label="原因"
              align='center'
              show-overflow-tooltip>
          </el-table-column>
          <el-table-column
              property="flag01"
              label="备注1"
              align='center'
              show-overflow-tooltip>
          </el-table-column>
          <el-table-column
              property="flag02"
              label="备注2"
              align='center'
              show-overflow-tooltip>
          </el-table-column>
          <el-table-column
              min-width="120"
              fixed="right"
              label="操作"
              align='center'>
            <template slot-scope="scope">
              <!-- <el-button type="text" size="small" @click.stop="relationUpdateGo(scope.row)">修改</el-button> -->
              <span class="operationIcon" @click.stop="relationUpdateGo(scope.row)">
                <el-tooltip class="item" effect="light" content="修改" placement="top">
                  <i class="el-icon-edit"></i>
                </el-tooltip>
              </span>
              <!-- <el-button type="text" size="small" @click.stop="deleteFather(scope.row)">删除</el-button> -->
              <span class="operationIcon ml5" @click.stop="deleteFather(scope.row)">
                <el-tooltip class="item" effect="light" content="删除" placement="top">
                  <i class="el-icon-delete"></i>
                </el-tooltip>
              </span>
            </template>
          </el-table-column>
        </el-table>
        <el-row>
          <el-col :span="24">
            <div class="pagination">
              <el-pagination
                  background
                  v-if='paginations.total > 0'
                  :page-sizes="paginations.pageSizes"
                  :page-size="paginations.pageSize"
                  :layout="paginations.layout"
                  :total="paginations.total"
                  :current-page='paginations.pageIndex'
                  @current-change='handleCurrentChange'
                  @size-change='handleSizeChange'>
              </el-pagination>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- 弹框 修改-->
    <el-dialog
        title="延期拒保原因维护"
        :visible.sync="relationDialog"
        v-if="relationDialog"
        width="60%"
        center>
      <el-form ref="oneForm" :model="form" :rules="oneRules" label-width="120px">
        <el-row>
          <el-col :span="12" class="common-box">
            <el-form-item label="PAS原因码" prop="noteitem">
              <el-input v-model="form.noteitem"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="common-box">
            <el-form-item label="原因" prop="notedesc">
              <el-select placeholder="请选择" v-if="status=='update'" disabled
                         v-model="form.zresnpd">
                <el-option
                    v-for="con in zresnpds"
                    :key="con.value"
                    :label="con.label"
                    :value="con.value">
                </el-option>
              </el-select>
              <el-select placeholder="请选择" v-else
                         v-model="form.zresnpd">
                <el-option
                    v-for="con in zresnpds"
                    :key="con.value"
                    :label="con.label"
                    :value="con.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" class="common-box">
            <el-form-item label="原因内容" prop="notedesc">
              <el-input v-model="form.notedesc"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" class="common-box">
            <el-form-item label="备注1">
              <el-input v-model="form.flag01"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="common-box">
            <el-form-item label="备注2">
              <el-input v-model="form.flag02"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
                <el-button @click="save" class="Defaultbutton">保 存</el-button>
                <el-button @click="relationDialog = false">返 回</el-button>
            </span>
    </el-dialog>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  import constant from '@/utils/constant';
  import {deleteFather, queryListForFather} from '@/api/setting/maintain/declinatureCaouse.js';
  import request from '@/utils/axios';
  import appName from "@/api/appName";
  import validRules from "@/utils/validRules";

  export default {
    data() {
      return {
        relationDialog: false,//默认隐藏 保额累计关系维护修改弹框
        searchParams: {
          noteitem: '',
          zresnpd: '',
        },
        searchRules: {
          noteitem: [
            {validator: validRules.isEnglishOrNumber, message: '请正确输入原因码！', trigger: 'blur'}
          ],
          zresnpd: []
        },
        relationtableData: [//数据
        ],
        loading: false,
        oneRules: {
          noteitem: [
            {required: true, message: '请输入原因码', trigger: 'blur'},
            {validator: validRules.isEnglishOrNumber, message: '请正确输入原因码！', trigger: 'blur'}
          ],
          zresnpd: [
            {required: true, message: '请选择原因类型', trigger: 'change'}
          ],
          notedesc: [
            {required: true, message: '请输入原因内容', trigger: 'blur'}
          ]
        },
        form: {
          id: null,
          noteitem: "",
          notecode: "",
          notedesc: "",
          zresnpd: "",
          flag01: "",
          flag02: ""
        },

        //需要给分页组件传的信息
        paginations: {
          total: 0,        // 总数
          pageIndex: 1,  // 当前位于哪页
          pageSize: 10,   // 1页显示多少条
          pageSizes: [5, 10, 15, 20],  //每页显示多少条
          layout: "total, sizes, prev, pager, next, jumper"   // 翻页属性
        },
        status: "add",
        zresnpds: [
          {
            label: '拒保',
            value: '01'
          },
          {
            label: '延期',
            value: '02'
          }
        ],
      }
    },
    created() {
    },
    mounted() {
    },
    methods: {
      save() {
        this.$refs['oneForm'].validate((valid) => {
          if (valid) {
            this.$store.dispatch('loading/CHANGE_LOADING', true)
            if (this.status == "add") {
              request({
                url: appName.NB + '/maintain/declinatureCause/add',
                method: 'post',
                data: this.form
              }).then(res => {
                this.$store.dispatch('loading/CHANGE_LOADING', false)
                if (res.resultCode == constant.SUCCESS) {

                  this.relationDialog = false;
                  this.$message({
                    message: '新增成功',
                    type: 'success'
                  });
                  this.getList();
                }

              }).catch(err => {
                this.$store.dispatch('loading/CHANGE_LOADING', false);
              })
            }
            if (this.status == "update") {
              request({
                url: appName.NB + '/maintain/declinatureCause/update',
                method: 'post',
                data: this.form
              }).then(res => {
                this.$store.dispatch('loading/CHANGE_LOADING', false)
                if (res.resultCode == constant.SUCCESS) {
                  this.relationDialog = false;
                  this.$message({
                    message: '修改成功',
                    type: 'success'
                  });
                  this.getList();
                }

              }).catch(err => {
                this.$store.dispatch('loading/CHANGE_LOADING', false);
              })
            }
          }
        });

      },
      goAdd() {
        this.relationDialog = true;
        this.form.id = null;
        this.form.zresnpd = "";
        this.form.noteitem = "";
        this.form.notecode = "";
        this.form.notedesc = "";
        this.form.flag01 = "";
        this.form.flag02 = "";
        this.status = "add";
      },

      relationUpdateGo(row) {
        this.status = "update";
        for (const key in this.form) {
          if (row[key]) {
            this.form[key] = row[key];
          } else {
            this.form[key] = '';
          }
        }
        this.relationDialog = true;
      },

      // 查询列表
      getList() {
        this.$refs['searchForm'].validate((valid) => {
          if (valid) {
            this.paginations.total = 0;
            this.relationtableData = [];
            let para = {
              pageSize: this.paginations.pageSize,
              pageNumber: this.paginations.pageIndex,
              noteitem: this.searchParams.noteitem,
              zresnpd: this.searchParams.zresnpd
            }
            this.$store.dispatch('loading/CHANGE_LOADING', true)
            queryListForFather(para).then(res => {
              this.$store.dispatch('loading/CHANGE_LOADING', false)
              if (res.resultCode == constant.SUCCESS) {
                if (res.data && res.data.list.length) {
                  this.paginations.total = res.data.total;
                  this.relationtableData = res.data.list;
                } else {
                  this.$message({
                    message: '无符合条件数据！',
                    type: 'error'
                  })
                }
              }
            }).catch(err => {
              this.$store.dispatch('loading/CHANGE_LOADING', false);
            })
          }
        });
      },
      // 每页多少条切换
      handleSizeChange(pageSize) {
        this.paginations.pageSize = pageSize;
        this.getList();
      },
      // 上下分页
      handleCurrentChange(page) {
        this.paginations.pageIndex = page;
        this.getList();
      },
      // 根据条件查询列表
      subGetList() {
        this.paginations.pageIndex = 1;
        this.getList();
      },
      // 清除查询条件
      resetSearch() {
        this.searchParams.noteitem = '';
        this.searchParams.zresnpd = '';
      },
      deleteFather(row) {

        this.$confirm("确认删除？", '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {

          this.$store.dispatch('loading/CHANGE_LOADING', true)
          deleteFather(row).then(res => {
            this.$store.dispatch('loading/CHANGE_LOADING', false)
            if (res.resultCode == constant.SUCCESS) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.getList();
            }

          }).catch(err => {
            this.$store.dispatch('loading/CHANGE_LOADING', false);
          })
        })

      }
    },
    computed: {
      ...mapGetters(['tags']),
      reload() {
        return this.$store.state.loading.reload;
      }
    },
    activated() {
      if (this.reload) {
        this.$store.dispatch('loading/CHNAGE_RELOAD', false)
        Object.assign(this.$data, this.$options.data());
      }
    },
    filters: {
      zresnpdPige: function (value) {
        var temp = "";
        if (value == "01") {
          temp = "拒保";
        } else if (value == "02") {
          temp = "延期";
        }

        return temp;
      },
    }
  }
</script>

<style lang="less" scoped>
  .fillcontain {
    padding-bottom: 0;
  }

  .contain {
    background: #fff;
    padding: 10px;
    margin-bottom: 20px;
  }

  .pagination {
    padding: 10px 20px;
    text-align: right;
  }

  .operationIcon {
    // padding: 12px;
    border: 1px solid #e5e5e5;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: inline-block;
    cursor: pointer;
    box-shadow: 0 0 3px #f9f9f9;
  }

  .search_container {
    padding: 20px 20px 0 20px;
    //    border-top: 1px solid #e1e1e1;
  }

  .common-box {
    padding-bottom: 15px;
  }

  .common-lab {
    line-height: normal !important;
    text-align: right;

    .labelName {
      text-align: right;
    }
  }
</style>



